<template>
  <div class="app-container flex-cloumn" v-loading="loading">

    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :rules="rules" label-width="40px">
      <el-row :gutter="12">
        <el-col :span="4">
          <el-form-item label="日期">
            <el-date-picker
                v-model="queryParams.opexDate"
                type="date"
                :style="{width: '100%'}"
                value-format="YYYY-MM-DD"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-button icon="Search" size="small" style="margin: 3px 3px" type="primary"
                   v-hasPermi="['report:opexMonitor:list']"
                   @click="handleQuery">搜索
        </el-button>
        <el-button icon="Search" :disabled="isMonitor" size="small" style="margin: 3px 3px" 
                   type="primary" v-hasPermi="['report:opexMonitor:check']"
                   @click="handleCheck">检查
        </el-button>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="10">
          <div v-show="isMonitor">
              <el-progress
                  :percentage="100"
                  status="success"
                  :indeterminate="true"
                  :duration="5"
              />
          </div>
        </el-col>
      </el-row>
    </el-form>

    <xTable ref="refOpexMonitorTable" v-loading="loading" :data="opexMonitorList" @row-dblclick="handleDbclick"
            class="tableDragger_form"
            multiple="false"
            border
            @selection-change="opexMonitorTableSelect"
            refId="refOpexMonitorTable">

      <template #columList>
        <el-table-column label="序号" align="center" type="index" width="auto">
        </el-table-column>
        <el-table-column align="center" label="检查类型" prop="opexType" width="200">
          <template #default="scope">
            <dict-tag spVal="*" :options="opexType" :value="scope.row.opexType"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" prop="status" width="100">
          <template #default="scope">
            <dict-tag spVal="*" :options="opexStatus" :value="scope.row.status"/>
          </template>
        </el-table-column>
        <el-table-column align="center" label="监控日期" prop="opexDate" width="100"></el-table-column>
        <el-table-column align="left" label="运维信息" prop="opexMsg" :show-overflow-tooltip="true"/>
        <el-table-column align="center" label="更新时间" prop="updateTime" width="200"/>
        <el-table-column align="center">
          <template #default="scope">
            <el-button size="small" v-hasPermi="['report:opexMonitorDetail:list']" @click="dispatch(scope.$index, scope.row)"
            >详情
            </el-button>
            <el-button size="small" :disabled="data.checkFlag[scope.$index]" v-hasPermi="['report:opexMonitor:checkOpexMonitorByOpexType']" @click="dispatchCheck(scope.$index, scope.row)"
            >检查
            </el-button>
            <div  v-show="data.checkFlag[scope.$index]">
              <el-progress
                  :percentage="100"
                  status="success"
                  :indeterminate="true"
                  :duration="5"
              />
          </div>
          </template>
        </el-table-column>
      </template>
    </xTable>
    <pagination
        style="margin:20px 0 20px 0"
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getOpexMonitorList"
    />

    <el-drawer v-model="drawer1" :direction="direction" title='行情检查：行情明细' size="50%" destroy-on-close
               @close="closeDrawer" v-loading="loading">
      <template #default>
        <el-form>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="标的">
                <marketUnderlyer ref="underlyerIdRef"  v-model="queryDetailParams.detCode" :style="{width: '100%'}" :underlyerId="queryDetailParams.detCode"
                          size="small">
                </marketUnderlyer>
              </el-form-item>
            </el-col>
            <el-button size="small" type="primary" style="margin: 3px 3px" v-hasPermi="['report:opexMonitorDetail:list']" @click="getDetailList">
              搜索
            </el-button>
          </el-row>
        </el-form>
        <xTable ref="refDailyPriceTable" v-loading="loading"
                :data="opexMonitorDetailList"
                class="tableDragger"
                multiple="false"
                border
                refId="refDailyPriceTable">
          <template #columList>
            <el-table-column label="序号" align="center" type="index" width="auto">
            </el-table-column>
            <el-table-column align="center" label="标的代码" prop="iCode" width="200" :show-overflow-tooltip="true">
              <template #default="scope">
                  <el-link type="primary" @click="queryMaketData(scope.row)">
                    {{ scope.row.iCode }}
                  </el-link>
                </template>
            </el-table-column>
            <el-table-column align="left" label="标的名称" prop="detName" width="200" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="监控日期" prop="opexDate" v-if="false" width="100"></el-table-column>
            <el-table-column align="center" label="开始日期" prop="detDate" width="100"></el-table-column>
            <el-table-column align="right" label="收盘价" prop="detContext" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="状态" prop="status" width="100">
              <template #default="scope">
                <dict-tag spVal="*" :options="opexStatus" :value="scope.row.status"/>
              </template>
            </el-table-column>
           </template>
        </xTable>
        <pagination
            style="margin:20px 0 20px 0"
            v-show="detailTotal > 0"
            v-model:limit="queryDetailParams.pageSize"
            v-model:page="queryDetailParams.pageNum"
            :total="detailTotal"
            @pagination="getDetailList"
        />

      </template>

    </el-drawer>

    <el-drawer v-model="drawer2" :direction="direction" title='曲线曲面检查：曲线曲面明细' size="50%" destroy-on-close
               @close="closeDrawer" v-loading="loading">
      <template #default>
        <xTable ref="refDailyPriceTable2" v-loading="loading"
                :data="opexMonitorDetailList"
                class="tableDragger"
                multiple="false"
                border
                refId="refDailyPriceTable">
          <template #columList>
            <el-table-column label="序号" align="center" type="index" width="auto">
            </el-table-column>
            <el-table-column align="center" label="曲线代码" prop="detCode" width="200" :show-overflow-tooltip="true">
                <template #default="scope">
                  <el-link type="primary" @click="queryCurve(scope.row, scope.row.opexType)">
                    {{ scope.row.detCode }}
                  </el-link>
                </template>
            </el-table-column>
            <el-table-column align="left" label="曲线名称" prop="detName" width="200" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="监控日期" prop="opexDate" v-if="false" width="100"></el-table-column>
            <el-table-column align="center" label="开始日期" prop="detDate" width="100"></el-table-column>
            <el-table-column align="right" label="利率" prop="detContext" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="状态" prop="status" width="100">
              <template #default="scope">
                <dict-tag spVal="*" :options="opexStatus" :value="scope.row.status"/>
              </template>
            </el-table-column>
           </template>
        </xTable>
        <pagination
            style="margin:20px 0 20px 0"
            v-show="detailTotal > 0"
            v-model:limit="queryDetailParams.pageSize"
            v-model:page="queryDetailParams.pageNum"
            :total="detailTotal"
            @pagination="getDetailList"
        />
      </template>
    </el-drawer>

    <el-drawer v-model="drawer3" :direction="direction" title='SUMMIT推送检查：推送明细' size="50%" destroy-on-close
               @close="closeDrawer" v-loading="loading3" >
      <template #default>
        <el-form>
          <el-row :gutter="12">
            <el-col :span="6">
              <el-form-item label="状态">
                  <dictCombox v-model="queryDetailParams.status" :style="{width: '100%'}" dictType="opexStatus"
                            size="small">
                  </dictCombox>
              </el-form-item>
            </el-col>
            <el-button size="small" type="primary" style="margin: 3px 3px" v-hasPermi="['report:opexMonitorDetail:list']" @click="getDetailList">
              搜索
            </el-button>
            <el-button size="small" type="primary" style="margin: 3px 3px" v-hasPermi="['report:opexMonitorDetail:downloadFileZip']" @click="downloadZipFile">
              下载全部文件
            </el-button>
          </el-row>
        </el-form>
        <xTable ref="refSummmitTable" v-loading="loading3"
                :data="opexMonitorDetailList"
                class="tableDragger"
                multiple="false"
                border
                refId="refDailyPriceTable">
          <template #columList>
            <el-table-column label="序号" align="center" type="index" width="auto">
            </el-table-column>
            <el-table-column align="center" label="推送类型" prop="detCode" width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="left" label="文件名称" prop="detName" width="250" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="监控日期" prop="opexDate" v-if="false" width="100"></el-table-column>
            <el-table-column align="right" label="推送结果" prop="detContext" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="状态" prop="status" width="100">
              <template #default="scope">
                <dict-tag spVal="*" :options="opexStatus" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="下载文件"  :show-overflow-tooltip="true">
              <template #default="scope">
                <el-link type="primary" :underline="false"
                     v-hasPermi="['report:opexMonitorDetail:download']"
                     style="font-size:12px;vertical-align: baseline;"
                     @click="downloadFile(scope.row.detName)">下载
            </el-link>
              </template>
            </el-table-column>
           </template>
        </xTable>
        <pagination
            style="margin:20px 0 20px 0"
            v-show="detailTotal > 0"
            v-model:limit="queryDetailParams.pageSize"
            v-model:page="queryDetailParams.pageNum"
            :total="detailTotal"
            @pagination="getDetailList"
        />
      </template>
    </el-drawer>
    <el-drawer v-model="drawer4" :direction="direction" title='期初价格检查：异常明细' size="50%" destroy-on-close
              @close="closeDrawer" v-loading="loading">
      <template #default>
        <el-form>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item label="合约编号">
                  <el-input v-model="queryDetailParams.detCode" maxlength="100" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-button size="small" type="primary" v-hasPermi="['report:opexMonitorDetail:list']" style="margin: 3px 3px" @click="getDetailList">
              搜索
            </el-button>
          </el-row>
        </el-form>
        <xTable ref="refDailyPriceTable2" v-loading="loading"
                :data="opexMonitorDetailList"
                class="tableDragger"
                multiple="false"
                border
                refId="refDailyPriceTable">
          <template #columList>
            <el-table-column label="序号" align="center" type="index" width="auto">
            </el-table-column>
            <el-table-column align="left" label="产品编号" prop="extTradeId"  :show-overflow-tooltip="true"/>
            <el-table-column align="left" label="合约编号" prop="iCode"  :show-overflow-tooltip="true">
              <template #default="scope">
                  <el-link type="primary" @click="queryTrade(scope.row)">
                    {{ scope.row.iCode }}
                  </el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" label="期权类型" prop="pType" width="auto">
              <template #default="scope"> 
                <dict-tag spVal="*" :options="optionType" :value="scope.row.pType"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="交易日期" prop="tradeDate" ></el-table-column>
            <el-table-column align="left" label="标的代码" prop="uICode" ></el-table-column>
            <el-table-column align="left" label="标的名称" prop="uIName" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="期初价格" prop="spotPrice" :show-overflow-tooltip="true"/>
           </template>
        </xTable>
        <pagination
            style="margin:20px 0 20px 0"
            v-show="detailTotal > 0"
            v-model:limit="queryDetailParams.pageSize"
            v-model:page="queryDetailParams.pageNum"
            :total="detailTotal"
            @pagination="getDetailList"
        />
      </template>
    </el-drawer>

    <el-drawer v-model="drawer5" :direction="direction" title='日终估值检查：异常明细' size="50%" destroy-on-close
              @close="closeDrawer" v-loading="loading">
      <template #default>
        <el-form>
          <el-row :gutter="12">
            <el-col :span="8">
              <el-form-item label="合约编号">
                  <el-input v-model="queryDetailParams.detCode"  maxlength="100" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-button size="small" type="primary" v-hasPermi="['report:opexMonitorDetail:list']" style="margin: 3px 3px" @click="getDetailList">
              搜索
            </el-button>
          </el-row>
        </el-form>
        <xTable ref="refDailyPriceTable2" v-loading="loading"
                :data="opexMonitorDetailList"
                class="tableDragger"
                multiple="false"
                border
                refId="refDailyPriceTable">
          <template #columList>
            <el-table-column label="序号" align="center" type="index" width="auto">
            </el-table-column>
            <el-table-column align="left" label="产品编号" prop="extTradeId"  :show-overflow-tooltip="true"/>
            <el-table-column align="left" label="合约编号" prop="iCode"  :show-overflow-tooltip="true">
              <template #default="scope">
                  <el-link type="primary" @click="queryTrade(scope.row)">
                    {{ scope.row.iCode }}
                  </el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" label="期权类型" prop="pType" width="auto">
              <template #default="scope"> 
                <dict-tag spVal="*" :options="optionType" :value="scope.row.pType"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="估值日期" prop="tradeDate" >
              <template #default="scope">
                {{ scope.row.tradeDate == 'null' ? '未估值' : scope.row.tradeDate }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="标的代码" prop="uICode" ></el-table-column>
            <el-table-column align="left" label="标的名称" prop="uIName" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="估值状态" prop="status" :show-overflow-tooltip="true">
              <template #default="scope">
                <dict-tag spVal="*" :options="opexStatus" :value="scope.row.status"/>
              </template>
            </el-table-column>
           </template>
        </xTable>
        <pagination
            style="margin:20px 0 20px 0"
            v-show="detailTotal > 0"
            v-model:limit="queryDetailParams.pageSize"
            v-model:page="queryDetailParams.pageNum"
            :total="detailTotal"
            @pagination="getDetailList"
        />
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="OpexMonitor">
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import {onActivated} from '@vue/runtime-core'
import {checkOpexMonitor, getOpexMonitorDetailList, getOpexMonitorList, checkOpexMonitorByOpexType} from '@/api/report/opexmonitor'
import {isVoid} from "../../../utils/util";
import marketUnderlyer from "@/xquant/base/marketUnderlyer";

const status = ref('insert')
const drawer1 = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
const drawer4 = ref(false)
const drawer5 = ref(false)
const isMonitor = ref(false)

function cancelClick() {
  drawer1.value = false
}

const {proxy} = getCurrentInstance()

const {
  opexStatus,
  opexType,
  optionType
} = proxy.useDict('opexStatus','opexType','optionType')

const opexMonitorList = ref([])
const opexMonitorDetailList = ref([])

const open = ref(false)
const disableFlag = ref(true)
const simpleOpen = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const selectRows = reactive({
  data: []
})
//索引
const indexs = ref([])
//数据
const rows = ref([])

const single = ref(true)
const single2 = ref(true)
const multiple = ref(true)
const total = ref(0)
const detailTotal = ref(0)
const title = ref('')
const dateRange = ref([])
const screenHeight = ref(document.documentElement.clientHeight - 300 + 'px')
const router = useRouter()


const data = reactive({
  checkFlag:[false,false,false,false,false,false,false],
  queryParams: {
    pageNum: 1,
    pageSize: 20,
    opexDate: proxy.$moment(proxy.getSysDate()).add(-1, 'd').format('YYYY-MM-DD'),
  },
  queryDetailParams: {
    pageNum: 1,
    pageSize: 20,
    opexDate: null,
    opexType: '',
    status: '',
    detCode: ''
  },
  rules: {
    opexDate: [{required: true, message: "查询日期不能为空", trigger: "blur"}]
  }
})
const {queryParams, queryDetailParams, rules} = toRefs(data)

/** 查询列表 */
function getOpexMonitor() {
  loading.value = true
  getOpexMonitorList(queryParams.value).then(response => {
    opexMonitorList.value = response.list
    total.value = response.total
    loading.value = false
  })
}

function queryCurve(row, opexType) {
  switch (opexType){
    case 'irCurve' :
      {
        router.push({
          path: "/curve/ircurvestrip",
          query: {"ircCode": row.detCode, "opexDate" : row.opexDate},
        })
      }
      break;
    case 'divCurve' : 
      {
        router.push({
            path: "/curve/divircurvestrip",
            query: {"divCode": row.detCode, "opexDate" : row.opexDate},
          })
      }
      break;
    case 'volSurface' : 
      {
        router.push({
          path: "/curve/HisVolCurve",
          query: {"volCode": row.detCode, "opexDate" : row.opexDate},
        })
      }
      break;
    default:
      {proxy.$modal.msgWarning("未支持该类型曲线曲面!");}
  }
}

function queryTrade(row) {
  var queryParam = {
    pageNum: 1,
    pageSize: 20,
    iCodes: undefined,
    opexDate: row.opexDate
  }
  var iCodesArry = [];
  iCodesArry.push(row.iCode)
  queryParam.iCodes = JSON.stringify(iCodesArry);
  router.push({path: '/TradeManage/tradeBalance', query: queryParam})
}

onActivated(() => {
  //解决跳转页面不刷新
  getOpexMonitor()
})

/** 搜索按钮操作 */
function handleQuery() {
  getOpexMonitor()
}

/** 运行按钮操作 */
function handleCheck() {
  if (isVoid(queryParams.value.opexDate)) {
    proxy.$modal.msgWarning("请填写日期！");
    return;
  }
  isMonitor.value = true
  checkOpexMonitor(queryParams.value).then(response => {
    isMonitor.value = false
    getOpexMonitor()
  }).catch(err => {
    proxy.$modal.msgWarning("请求超时!请稍后重试!");
    isMonitor.value = false
    getOpexMonitor()
  })
}
function opexMonitorTableSelect(selection) {
  
}

/**
 * 根据opexType 显示相应的drawer
 *
 * */
function dispatch(index, row) {
  switch (row.opexType){
    case 'summit' :
      {openDetail3(index, row)};
      break;
    case 'dailyPrice' :
      {openDetail1(index, row)};
      break;
    case 'irCurve' :
    case 'divCurve' : 
    case 'volSurface' : 
      {openDetail2(index, row)};
      break;
    case 'initPrice' :
      {openDetail4(index, row)};
      break;
    case 'endDayValuation' :
      {openDetail5(index, row)};
      break;
    default:
      {proxy.$modal.msgWarning("未支持该类型检查!");}
  }
}

function queryMaketData(row) {
  if (row.detContext == '标的不存在') {
    proxy.$modal.msgWarning("标的不存在,无法跳转")
    return
  }
  const aType = row.detCode.split(',')[1];
  switch (aType) {
    case 'IDX_S' :
    case 'IDX_BD' :
      {
        router.push({
          path: "/marketdata/equity/IndexQuota",
          query: {"iCode": row.iCode, "begDate": row.opexDate},
        })
      }
      break;
    case 'SPT_CMDT' :
      {
        router.push({
          path: "/marketdata/commd/CommodityPrice",
          query: {"iCode": row.iCode, "begDate": row.opexDate},
        })
      };
      break;
    case 'SPT_ETF' :
      {
        router.push({
          path: "/marketdata/equity/FundsPrice",
          query: {"iCode": row.iCode, "begDate": row.opexDate},
        })
      };
      break;
    case 'FUT_IDX_S' :
      {
         router.push({
          path: "/marketdata/equity/EquityFuturesGuota",
          query: {"iCode": row.iCode, "begDate": row.opexDate},
        })
      }
      break;
    case 'FUT_CMDT' : 
      {
         router.push({
          path: "/marketdata/commd/CommodityFuturePrice",
          query: {"iCode": row.iCode, "begDate": row.opexDate},
        })
      }
      break;
    default:
      {proxy.$modal.msgWarning("未支持该标的页面!");}
  }
}
/**
 * 根据opexType 进行具体的检查
 *
 * */
function dispatchCheck(index, row) {
  data.checkFlag[index] = true
  checkOpexMonitorByOpexType({"opexType": row.opexType, "opexDate": row.opexDate}).then(response => {
    if(response.errorCode === -1) {
      proxy.$modal.msgWarning("检查失败!",response.errorMsg);
    }
    data.checkFlag[index] = false
    getOpexMonitor()
  }).catch(err => {
    proxy.$modal.msgWarning("请求超时!请稍后重试!");
    data.checkFlag[index] = false
    getOpexMonitor()
  })
}
/**
 * 运维监控 明细
 *
 * */
function openDetail1(index, row) {
  loading.value = true
  drawer1.value = true
  handleDbclick(row);
}
/**
 * 运维监控 明细
 *
 * */
function openDetail2(index, row) {
  loading.value = true
  drawer2.value = true
  handleDbclick(row);
}
/**
 * summit监控 明细
 *
 * */
function openDetail3(index, row) {
  loading.value = true
  drawer3.value = true
  handleDbclick(row);
}

function openDetail4(index, row) {
  loading.value = true
  drawer4.value = true
  handleDbclick(row);
}

function openDetail5(index, row) {
  loading.value = true
  drawer5.value = true
  handleDbclick(row);
}

function closeDrawer() {
  resetDetailParams()
}

function resetDetailParams() {
  queryDetailParams.value = {
    pageNum: 1,
    pageSize: 20,
    opexDate: null,
    opexType: '',
    status: '',
    detCode: ''
  }
}

function downloadFile(fileName) {
  proxy.download("/pricing/opexMonitor/downloadFile.action",
    Object.assign({fileName: fileName}, {})
  , fileName);
}

function downloadZipFile() {
  proxy.download("/pricing/opexMonitor/downloadFileZip.action", Object.assign({
    ...queryDetailParams.value
  }), `SUMMIT推送_${queryDetailParams.value.opexDate}_${new Date().getTime()}.zip`);
}

function handleDbclick(row, column, event) {

  let {opexType, opexDate,status} = row
  queryDetailParams.value.opexDate = opexDate;
  queryDetailParams.value.opexType = opexType;
  queryDetailParams.value.status = status
  getOpexMonitorDetailList(queryDetailParams.value).then(response => {
    opexMonitorDetailList.value = response.list
    detailTotal.value = response.total
    loading.value = false
  })
}

function getDetailList() {
  loading.value = true
  getOpexMonitorDetailList(queryDetailParams.value).then(response => {
    opexMonitorDetailList.value = response.list
    detailTotal.value = response.total
    loading.value = false
  })
}


onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 300)
  window.onresize = function temp() {
    screenHeight.value = document.documentElement.clientHeight - 80 + 'px;'
  }
})

getOpexMonitor()

</script>

<style scoped>
.tradeCard {
  margin: 1rem 0.5rem 1rem 0.5rem;
  padding: 1rem;
  height: 100%;
}

.instrumentCard {
  margin: 1rem 0.5rem 1rem 0rem;
  padding: 1rem;
  height: 100%;
}

/deep/ .el-card__header {
  background-color: white;
  background-image: inherit;
}
</style>



